<div class="row-fluid">
    <div id="content" class="row-fluid">
        <div class="box span12">
            <div class="box-header well">
                <h2>Quản lý tài khoản</h2>
            </div>
            
            <div class="box-content">
                <div class="ajax-loaders"></div>
                <div class="buttons fr">
                    <a href="#dialog-adduser" class="btn btn-primary" data-toggle="modal"><i class="icon icon-add icon-white"></i> Thêm</a>
                </div>
                <br />
                <hr class="cb" />
                <div class="table-content">
                    <table class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th style="width: 25px;">#</th>
                                <th>Tài khoản</th>
                                <th>Họ &amp; Tên</th>
                                <th>Địa chỉ</th>
                                <th>Điện thoại</th>
                                <th>Email</th>
                                <th>Nhóm</th>
                                <th></th>
                            </tr>
                        </thead>                        
                        <tbody></tbody>
                        <tfoot>
                        
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>	
</div>

<!-- Form add user -->
<div id="dialog-adduser" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Thêm tài khoản</h3>
  </div>
  <div class="modal-body">
    <div class="alert fade in" style="display: none;">
        <strong>Lỗi!</strong> <span class="message">Hãy nhập dữ liệu vào các trường bắt buộc.</span>
    </div>
    <form class="form-horizontal row-fluid" onsubmit="return insert_new_user(this)" name="form_inser_user" method="post" action="<?php echo $this->url(array('controller'=>'system','action'=>'account'))?>" >
        <div class="span6">
            <div class="control-group">
                <div class="control-label">Tài khoản</div>
                <div class="controls">
                    <input class="input-large required" type="text" name="TenTaiKhoan" placeholder="Tên tài khoản" />
                </div>
            </div>
            
            <div class="control-group">
                <div class="control-label">Mật khẩu</div>
                <div class="controls">
                    <input class="input-large required" type="password" name="MatKhau" placeholder="Mật khẩu" />
                </div>
            </div>
            
            <div class="control-group">
                <div class="control-label">Họ tên</div>
                <div class="controls">
                    <input class="input-large" type="text" name="HoTen" placeholder="Họ tên" />
                </div>
            </div>
        </div>
        <div class="span6">
            <div class="control-group">
                <div class="control-label">Điện thoại</div>
                <div class="controls">
                    <input class="input-large" type="text" name="DienThoai" placeholder="Điện thoại" />
                </div>
            </div>
            
            <div class="control-group">
                <div class="control-label">Email</div>
                <div class="controls">
                    <input class="input-large" type="text" name="Email" placeholder="Email" />
                </div>
            </div>
            
            <div class="control-group">
                <div class="control-label">Nhóm</div>
                <div class="controls">
                    <select name="MaNhom" class="input-large">
                        <?php foreach($this->ds_nhom as $nhom){ ?>
                        <option value="<?php echo $nhom['MaNhom']?>"><?php echo $nhom['TenNhom']?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            
        </div>
        <div class="control-group cb">
            <div class="control-label">Địa chỉ</div>
            <div class="controls">
                <textarea rows="4" class="input-large" name="DiaChi" placeholder="Địa chỉ"></textarea>
            </div>
        </div>
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Thoát</a>
    <a href="#" class="btn btn-primary" onclick="return insert_new_user(form_inser_user)">Thêm tài khoản</a>
  </div>
</div>

<!-- Form edit user -->
<div id="dialog-edituser" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Thêm tài khoản</h3>
  </div>
  <div class="modal-body">
    <div class="alert fade in" style="display: none;">
        <strong>Lỗi!</strong> <span class="message">Hãy nhập dữ liệu vào các trường bắt buộc.</span>
    </div>
    <form class="form-horizontal row-fluid" onsubmit="return edit_user(this)" name="form_edit_user" method="post" action="<?php echo $this->url(array('controller'=>'system','action'=>'account'))?>" >
        
        <div class="span6">
            <div class="control-group">
                <div class="control-label">Tài khoản</div>
                <div class="controls">
                    <input type="hidden" name="MaTaiKhoan" value="" />
                    <input disabled="true" class="input-large required" type="text" name="TenTaiKhoan" placeholder="Tên tài khoản" />
                </div>
            </div>
            
            <div class="control-group">
                <div class="control-label">Mật khẩu</div>
                <div class="controls">
                    <input class="input-large required" type="password" name="MatKhau" placeholder="Mật khẩu" />
                </div>
            </div>
            
            <div class="control-group">
                <div class="control-label">Họ tên</div>
                <div class="controls">
                    <input class="input-large" type="text" name="HoTen" placeholder="Họ tên" />
                </div>
            </div>
        </div>
        <div class="span6">
            <div class="control-group">
                <div class="control-label">Điện thoại</div>
                <div class="controls">
                    <input class="input-large" type="text" name="DienThoai" placeholder="Điện thoại" />
                </div>
            </div>
            
            <div class="control-group">
                <div class="control-label">Email</div>
                <div class="controls">
                    <input class="input-large" type="text" name="Email" placeholder="Email" />
                </div>
            </div>
            
            <div class="control-group">
                <div class="control-label">Nhóm</div>
                <div class="controls">
                    <select name="MaNhom" class="input-large">
                        <?php foreach($this->ds_nhom as $nhom){ ?>
                        <option value="<?php echo $nhom['MaNhom']?>"><?php echo $nhom['TenNhom']?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            
        </div>
        <div class="control-group cb">
            <div class="control-label">Địa chỉ</div>
            <div class="controls">
                <textarea rows="4" class="input-large" name="DiaChi" placeholder="Địa chỉ"></textarea>
            </div>
        </div>
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Thoát</a>
    <a href="#" class="btn btn-primary" onclick="return edit_user(form_edit_user)">Cập nhật</a>
  </div>
</div>

<script id="tmpl-tbody" type="text/x-tmpl">
{% for (var i=0; i<o.tbody.length; i++) { %}
    <tr id="group_{%=o.tbody[i].MaTaiKhoan%}">
        <td>{%=o.tbody[i].MaTaiKhoan%}</td>
        <td>{%=o.tbody[i].TenTaiKhoan%}</td>
        <td>{%=o.tbody[i].HoTen%}</td>
        <td>{%=o.tbody[i].DiaChi%}</td>
        <td>{%=o.tbody[i].DienThoai%}</td>
        <td>{%=o.tbody[i].Email%}</td>
        <td>{%=o.tbody[i].Nhom%}</td>
        <td>
            <a href="#" onclick="return open_modal_edit({%=o.tbody[i].MaTaiKhoan%})" title="Sửa"><i class="icon icon-edit icon-blue"></i></a>
            {% if(o.tbody[i].TenTaiKhoan!="admin") { %}
            <a href="#" onclick="return del_user({%=o.tbody[i].MaTaiKhoan%})" title="Xóa" class="fr"><i class="icon icon-trash icon-red"></i></a>
            {% } %}            
        </td>
    </tr>
{% } %}
</script>

<script>
var list_user = new Array();
$(function(){
    // Onload
    var link = "<?php echo $this->url(array('controller'=>'system','action'=>'account'));?>";
    $(".ajax-loaders").show();
    $.post(link,{'ajax_action': 'ajaxLoad','sdata':null},function( rdata ){        
        $(".ajax-loaders").hide();
        $(".table tbody").html( tmpl("tmpl-tbody", rdata) );
    },'json');
});

// Them tai khoản
function insert_new_user(form){
    if( checkRequired(form) == true ) {
        var link = form.action;
        var sdata = $(form).serialize();
            
        $(".ajax-loaders").show();
        $.post(link,{'ajax_action':'ajaxInsert','sdata':sdata},function(rdata){
            if(rdata['message'] == undefined ){
                $(".ajax-loaders").hide();
                $(".table tbody").html( tmpl("tmpl-tbody", rdata) );
                $("#dialog-adduser").modal("hide");
                form.reset();
            }else{
                $(".ajax-loaders").hide();
                $("#dialog-adduser").find(".message").text(rdata['message']);
                $("#dialog-adduser").find(".alert").show().fadeOut("slow");
            }
        },'json');
        return true 
    }else{
        $("#dialog-adduser").find(".alert")
            .removeClass("alert-sucess")
            .addClass("alert-error").show();
        return false;
    }   
}

// Cap nhat tai khoan
function open_modal_edit($id_user){
    $("#dialog-edituser").find("input[name='MaTaiKhoan']").val($id_user);
    $(".ajax-loaders").show();
    var link = "<?php echo $this->url(array('controller'=>'system','action'=>'account'));?>";
    $.post(link,{'ajax_action':'ajaxGetUser',sdata:$id_user},function(rdata){
        $.each(rdata,function(name,value){
            if(name!="MatKhau") $("#dialog-edituser form").find("[name='"+name+"']").val(value);
        });
        $("#dialog-edituser").css({
            width: "700px",
            left: "45%"
        }).modal("show");
        $(".ajax-loaders").hide();
    },'json');
    return false;
}
function edit_user(form){
    $(".ajax-loaders").show();
    $.post(form.action,{'ajax_action':'ajaxEditUser',sdata:$(form).serialize()},function(rdata){
        if(rdata['message'] == undefined ){
            $(".table tbody").html( tmpl("tmpl-tbody", rdata) );
            $("#dialog-edituser").modal("hide");
            form.reset();
        }else{            
            $("#dialog-edituser").find(".message").text(rdata['message']);
            $("#dialog-edituser").find(".alert").show().fadeOut("slow");
        }
        $(".ajax-loaders").hide();
    });
    return false;
}

// Xoa tai khoan
function del_user($id_user){
    var link = "<?php echo $this->url(array('controller'=>'system','action'=>'account'));?>";
    $(".ajax-loaders").show();
    $.post(link,{'ajax_action': 'ajaxDelete','sdata':{'MaTaiKhoan':$id_user}},function( rdata ){        
        $(".ajax-loaders").hide();
        $(".table tbody").html( tmpl("tmpl-tbody", rdata) );
    },'json');
    return false;
}
</script>